<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/spritejs.js"></script>
    <title>spritejs.js</title>
</head>

<body>
    <div id="stage" style="width: 3080px; height: 800px">

    </div>
    <script>
        (async function () {
        const { Scene, Sprite } = spritejs;

        const container = document.getElementById('stage');
        const scene = new Scene({ container, width: 3080, height: 800, mode: 'stickyTop' });

        const layer = scene.layer();

        const robot = new Sprite('image/robot.png');

        robot.attr({
            anchor: [0, 0.5],
            pos: [0, 0],
        });

        robot.animate([
            { pos: [0, 0] },
            { pos: [0, 300] },
            { pos: [2700, 300] },
            { pos: [2700, 0] },
        ], {
            duration: 1000,
            iterations: Infinity,
            direction: 'alternate',
        });

        layer.append(robot);
    }());
    </script>
</body>

</html>